<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>药品入库</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
    <style>
        /* 适用于Chrome、Safari、Edge等WebKit内核浏览器 */
        ::-webkit-scrollbar {
            display: none;
        }

        /* 适用于Firefox */
        html {
            scrollbar-width: none;
        }
    </style>
</head>
<body>
<div class="layui-padding-3">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <form class="layui-form layui-form-pane">

                <!--当前登录的用户信息-->
                <div class="layui-card" style="margin-bottom: 16px; border: 1px solid #e2e2e2;">
                    <div class="layui-card-header">🟪 操作人员信息：</div>
                    <div class="layui-card-body">

                        <div class="layui-form-item layui-col-space10" style="margin-bottom: 0;">

                            <div class="layui-col-md3">
                                <label class="layui-form-label">用户姓名：</label>
                                <div class="layui-input-block">
                                    <input type="text" th:value="${session.loginUser.name}" class="layui-input" disabled>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">身份证号：</label>
                                <div class="layui-input-block">
                                    <input type="text" th:value="${session.loginUser.card}" class="layui-input" disabled>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">电子邮箱：</label>
                                <div class="layui-input-block">
                                    <input type="text" th:value="${session.loginUser.email}" class="layui-input" disabled>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">身份说明：</label>
                                <div class="layui-input-block">
                                    <input type="text" th:value="${session.loginUser.other}" class="layui-input" disabled>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

                <!--供应商信息-->
                <div class="layui-card" style="margin-bottom: 16px; border: 1px solid #e2e2e2;">
                    <div class="layui-card-header">🟩 供应商户信息：</div>
                    <div class="layui-card-body">

                        <div class="layui-form-item layui-col-space10" style="margin-bottom: 0;">
                            <div class="layui-col-md3">
                                <select lay-search="" lay-filter="vendor" lay-verify="required" id="vendor">
                                    <option value="">请选择或搜索供应商</option>
                                    <option th:each="v : ${vendorList}" th:value="${v.id}" th:text="${v.name}"></option>
                                </select>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">供应商名称：</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="vendorName" disabled>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">电子邮箱：</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="vendorEmail" disabled>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">联系电话：</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="vendorPhone" disabled>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">详细地址：</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="vendorAddress" disabled>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

                <!--使用 template 标签存放 模板药品入库信息模板(开始)-->
                <template id="myTemplate">
                    <br/>
                    <div class="layui-form-item layui-col-space10 layui-anim layui-anim-upbit" style="margin-bottom: 0;">
                        <div class="layui-col-md3">
                            <select lay-search="" lay-filter="medicine-select" lay-verify="required" name="medicineId[]">
                                <option value="">请选择或搜索药品信息</option>
                                <option th:each="m : ${medicineList}" th:value="${m.id}" th:text="${m.name}"></option>
                            </select>
                        </div>

                        <!--静态数据-自动填充-->
                        <div class="layui-col-md3">
                            <label class="layui-form-label">药品规格：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" disabled>
                            </div>
                        </div>

                        <div class="layui-col-md3">
                            <label class="layui-form-label">包装照片：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" disabled>
                            </div>
                        </div>

                        <div class="layui-col-md3">
                            <label class="layui-form-label">生产厂家：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" disabled>
                            </div>
                        </div>

                        <!--动态数据-手动输入-->
                        <div class="layui-col-md3">
                            <label class="layui-form-label">有效日期：</label>
                            <div class="layui-input-block">
                                <input type="text" name="birthday[]" autocomplete="off" lay-verify="required" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-col-md3">
                            <label class="layui-form-label">药品数量：</label>
                            <div class="layui-input-block">
                                <input type="number" name="count[]" autocomplete="off" lay-affix="number" lay-verify="required|number" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-col-md3">
                            <label class="layui-form-label">药品单价：</label>
                            <div class="layui-input-block">
                                <input type="number" name="price[]" autocomplete="off" lay-affix="number" lay-verify="required" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-col-md3">
                            <label class="layui-form-label">备注信息：</label>
                            <div class="layui-input-block">
                                <input type="text" name="other[]" autocomplete="off" lay-verify="required" maxlength="255" class="layui-input">
                            </div>
                        </div>

                    </div>
                </template>
                <!--使用 template 标签存放 模板药品入库信息模板(结束)-->

                <!--药品入库信息-->
                <div class="layui-card" style="margin-bottom: 16px; border: 1px solid #e2e2e2;">
                    <div class="layui-card-header">🟧 药品入库信息：</div>
                    <div class="layui-card-body" id="stockBox">

                        <div class="layui-form-item layui-col-space10" style="margin-bottom: 0;">
                            <div class="layui-col-md3">
                                <select lay-search="" lay-filter="medicine-select" lay-verify="required" name="medicineId[]">
                                    <option value="">请选择或搜索药品信息</option>
                                    <option th:each="m : ${medicineList}" th:value="${m.id}" th:text="${m.name}"></option>
                                </select>
                            </div>

                            <!--静态数据-自动填充-->
                            <div class="layui-col-md3">
                                <label class="layui-form-label">药品规格：</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" disabled>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">包装照片：</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" disabled>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">生产厂家：</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" disabled>
                                </div>
                            </div>

                            <!--动态数据-手动输入-->
                            <div class="layui-col-md3">
                                <label class="layui-form-label">有效日期：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="birthday[]" autocomplete="off" lay-verify="required" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">药品数量：</label>
                                <div class="layui-input-block">
                                    <input type="number" name="count[]" lay-affix="number" autocomplete="off" lay-verify="required|number" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">药品单价：</label>
                                <div class="layui-input-block">
                                    <input type="number" name="price[]" lay-affix="number" autocomplete="off" lay-verify="required" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <label class="layui-form-label">备注信息：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="other[]" autocomplete="off" lay-verify="required" maxlength="255" class="layui-input">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <!--底部操作按钮-->
                <div class="layui-panel layui-padding-2 layui-col-md12">
                    <div class="layui-col-md4">
                        <div class="layui-col-md10 layui-col-lg-offset2">
                            <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-green layui-anim layui-anim-scaleSpring" lay-on="addStock">添加更多药品入库信息
                            </button>
                        </div>
                    </div>

                    <div class="layui-col-md4">
                        <div class="layui-col-md10 layui-col-lg-offset1">
                            <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-red layui-anim layui-anim-scaleSpring" lay-on="delStock">删除末尾药品入库信息</button>
                        </div>
                    </div>

                    <div class="layui-col-md4">
                        <div class="layui-col-md10">
                            <button class="layui-btn layui-btn-fluid layui-btn-primary layui-border-blue layui-anim layui-anim-scaleSpring" lay-submit lay-filter="toInputStock">执行本次药品入库操作
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery', 'util', 'laydate'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;
        let util = layui.util;
        let laydate = layui.laydate;

        // 渲染日期组件
        laydate.render({
            elem: 'input[name="birthday[]"]'
        });

        // 自定义验证规则
        form.verify({
            number: function (value) {
                if (value > Math.floor(value)) {
                    return '药品数量应为正整数';
                }
                if (value < 1) {
                    return '请输入一个正整数';
                }
            }
        });

        // 供应商选择事件
        form.on('select(vendor)', function(data){
            var vendorId = data.value;
            if(vendorId) {
                // 获取供应商信息
                $.get('/vendor/get/' + vendorId, function(res){
                    if(res.code === 0) {
                        var vendor = res.data;
                        $('#vendorName').val(vendor.name);
                        $('#vendorEmail').val(vendor.email);
                        $('#vendorPhone').val(vendor.phone);
                        $('#vendorAddress').val(vendor.address);
                    }
                });
            } else {
                $('#vendorName').val('');
                $('#vendorEmail').val('');
                $('#vendorPhone').val('');
                $('#vendorAddress').val('');
            }
        });

        // select 选中事件-选择药品
        form.on('select(medicine-select)', function (data) {
            let elem = data.elem; // 获得 select 原始 DOM 对象
            let value = data.value; // 获得被选中的值
            $.ajax({
                url: '/getMedicineData/' + value,
                type: 'GET',
                success: function (res) {
                    const parentDiv = $(elem).closest('.layui-form-item');
                    parentDiv.find('input:eq(1)').val(res.specs);
                    parentDiv.find('input:eq(2)').val(res.image);
                    parentDiv.find('input:eq(3)').val(res.origin);
                },
                error: function (err) {
                    layer.msg('Ajax请求异常！', {icon: 0});
                }
            });
        });

        // 获取模板的盒子容器和模板
        let stockBox = $('#stockBox');

        // 添加及删除模板操作
        util.on('lay-on', {
            addStock: function () {
                stockBox.append($('#myTemplate').contents().clone());   // 获取药品入库信息模板内容并克隆
                form.render();
                laydate.render({
                    elem: 'input[name="birthday[]"]'
                });
            },
            delStock: function () {
                if (stockBox.children().length <= 1) {
                    layer.msg('不能删除了，至少包含一组药品入库信息！')
                } else {
                    stockBox.children().last().add(stockBox.children().last().prev()).remove();
                }
            }
        });

        // 提交事件
        form.on('submit(toInputStock)', function () {

            // 验证操作用户密码是否正确
            layer.prompt({title: '输入当前操作用户的密码进行身份验证！', formType: 1}, function (pass, index) {
                layer.close(index);

                $.post('/confirmLoginUserPassword', {password: pass}, function (response) {
                    if (response) {
                        layer.msg('身份验证通过！', {icon: 6});
                        setTimeout(() => {

                            const stockData = [];   // 汇总输入的药品入库信息集合

                            let totalAmount = 0;    // 药品总价

                            $('select[name="medicineId[]"]').each(function (index) {
                                const stock = {
                                    what: $(this).val(),
                                    birthday: $('input[name="birthday[]"]').eq(index).val(),
                                    count: $('input[name="count[]"]').eq(index).val(),
                                    price: $('input[name="price[]"]').eq(index).val(),
                                    other: $('input[name="other[]"]').eq(index).val(),
                                    from: $('#vendor').val()
                                }
                                // 计算药品总价
                                totalAmount += $('input[name="count[]"]').eq(index).val() * $('input[name="price[]"]').eq(index).val();
                                stockData.push(stock);
                            });

                            // 进行提交
                            $.ajax({
                                url: '/doInputStock/' + totalAmount,
                                type: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify(stockData),
                                success: function (res) {
                                    if (res.code) {
                                        layer.msg('入库成功！', {icon: 1});
                                        setTimeout(function () {
                                            location.reload();  // 尝试从缓存中加载页面
                                        }, 2000);
                                    } else {
                                        layer.msg('入库失败！', {icon: 2});
                                    }
                                },
                                error: function () {
                                    layer.msg('Ajax请求异常！', {icon: 0});
                                }
                            });
                        }, 2000);
                    } else {
                        layer.msg('身份验证未通过！', {icon: 5});
                        return false; // 阻止默认 form 跳转
                    }
                });
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>
</body>
</html>